/**
 * 行政区
 */
var xunStore4a_1 = Ext.create('Ext.data.Store', {
	storeId: 'xunAdminArea4a_1',
	fields:[ 'index1', 'index2', 'index3', 'index4', 'index5', 'index6', 'index7', 'index8', 'index9', 'index10',
		'index11', 'index12', 'index13', 'index14', 'index15', 'index16', 'index17', 'index18', 'index19', 'index20'],
	groupField: 'index1'
});

xunStore4a_1.add([
	{index1: '行政区1', index2: '流域1', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区1', index2: '流域2', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区1', index2: '流域3', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区1', index2: '流域4', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区2', index2: '流域1', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区2', index2: '流域2', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区2', index2: '流域3', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区2', index2: '流域4', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区3', index2: '流域1', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区3', index2: '流域2', index3: Math.random()*100, index4: Math.random()*100},
	{index1: '行政区3', index2: '流域3', index3: Math.random()*100, index4: Math.random()*100}
]);

var xunAdministrativeMap;

function xunFillDataAdministrativeArea(data){
	xunStore4a_1.setData(data);
}

function xunFillDataxunAdministrativeMap(element, title){
	// 随机数据
	var data = [{name:"景德镇",value:71,value2:66},
		{"name":"萍乡","value":11,value2:Math.random().toFixed(2)},
		{"name":"新余","value":65,value2:Math.random().toFixed(2)},
		{"name":"鹰潭","value":92,value2:Math.random().toFixed(2)},
		{"name":"南昌","value":89,value2:Math.random().toFixed(2)},
		{"name":"吉安","value":100,value2:Math.random().toFixed(2)},
		{"name":"宜春","value":54,value2:Math.random().toFixed(2)},
		{"name":"上饶","value":10,value2:Math.random().toFixed(2)},
		{"name":"抚州","value":52,value2:Math.random().toFixed(2)},
		{"name":"赣州","value":6,value2:Math.random().toFixed(2)},
		{"name":"九江","value":18,value2:Math.random().toFixed(2)}];
	// 初始化图表
	xunAdministrativeMap = new Highcharts.Map(element, {
	  title: {
	    text: title
	  },
	  colorAxis: {
	    min: 0,
	    minColor: 'rgb(255,255,255)',
	    maxColor: '#006cee',
	    showInLegend: false
	  },
	  series: [{
	    data: data,
	    name: '随机数据',
	    mapData: Highcharts.maps['cn/jiangxi'],
	    joinBy: 'name', // 根据 name 属性进行关联,
	    	dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
	  }],
	  tooltip: {
          useHTML: true,
          headerFormat: '<table><tr><td>{point.name}</td></tr>',
          pointFormat: '<tr><td>行政区</td><td>{point.properties.fullname}</td></tr>' +
          '<tr><td>行政编号</td><td>{point.properties.areacode}</td></tr>' +
          '<tr><td>缺水量</td><td>{point.value}</td></tr>' +
          '<tr><td>缺水率</td><td>{point.value2}</td></tr>' ,
          footerFormat: '</table>'
      },
	});
}

Ext.define('Admin.view.needwater.xunpack.subpage.administrativeArea',{
	extend:'Ext.panel.Panel',
	xtype:'xunAdministrativeArea',
	//起别名
	alias:'xunAdministrativeArea',
	require:[],
	user:[],
	userCLs:'big-100 small-100',
	layout: {
        type: 'hbox',
        align: 'stretch'
    },
	items: [{
		/*html: '<div id="chart4-administartive-1" style="width:100%;height: 700px;"></div>',
		listeners: {
			resize: {
				fn: function(){
					xunAdministrativeMap.reflow();
				}
			},
			boxready: {
				fn: function(obj, width, height, eOpts){
					xunFillDataxunAdministrativeMap('chart4-administartive-1', '供水情况统计图（行政分区）');
				}
			}
		},*/
		xtype: 'image',
		region: 'center',
    	src: 'resources/images/wateroptimum/fhadmin.jpg',
    	flex: 1,
    	height: 700
    	/*html: '<div style="background-image:url("app/view/waterOptimum/fhadmin.jpg");width:100%;height:100%;"></div>',
    	flex: 1,
    	border: true*/
	},{
		xtype: 'grid',
		store: Ext.data.StoreManager.lookup('xunAdminArea4a_1'),
		border: true,
		flex:1,
		margin: '0 0 0 15',
		features: [{
            id: 'group',
            ftype: 'groupingsummary',
            groupHeaderTpl: '行政区：{name}',
            hideGroupedHeader: true,
            enableGroupingMenu: false
        }],
		columns: [
			{ text: '水资源区', dataIndex: 'index2', minWidth: 100, width:'31%', align: 'center' },
			{ text: '需水量(亿m³)', dataIndex: 'index3', minWidth: 100, width:'17%', align: 'center', renderer:
					function customRound(value, record){
						if(value == null)return null;
						return Ext.util.Format.round(value, 3);
					}
			},
			{ text: '供水量(亿m³)', dataIndex: 'index4', minWidth: 100, width:'17%', align: 'center', renderer:
					function customRound(value, record){
						if(value == null)return null;
						return Ext.util.Format.round(value, 3);
					}
			},
			{ text: '缺水量(亿m³)', dataIndex: 'index5', minWidth: 100, width:'17%', align: 'center', renderer:
					function customRound(value, record){
						if(value == null)return null;
						return Ext.util.Format.round(value, 3);
					}
			},
			{ text: '缺水率', dataIndex: 'index6', minWidth: 100, width:'17%', align: 'center', renderer:
					function customRound(value, record){
						if(value == null)return null;
						return Ext.util.Format.round(value, 3);
					}
			}
		]
	}]

});
